<template>
    <div>
        <table></table>
        <div class="box">
            <div class="top">
                <img src="../img/search.png" alt="" class="search">
                <input type="text" placeholder="查找产品......" class="search2">
            </div>
        </div>
        <mt-navbar class="page-part" v-model="active">
                <mt-tab-item id="1">鞋类</mt-tab-item>
                <mt-tab-item id="2">服饰类</mt-tab-item>
                <mt-tab-item id="3">附配件类</mt-tab-item>
            </mt-navbar>
            <mt-tab-container :active.sync="active" v-model="active">
                    <mt-tab-container-item id="1">
                        <div v-for="(item,i) of list" :key="i">
                            <div class="product">
                                <span style="display:inline-block;width:100px;">{{item.fname}}</span>
                                <img :src="`http://127.0.0.1:3000/`+item.path" alt="" class="f2">
                            </div>
                        </div>
                        <div style="width:100%;height:50px;"></div>
                    </mt-tab-container-item>
                    <mt-tab-container-item id="2">
                        <yifu></yifu>
                    </mt-tab-container-item>
                    <mt-tab-container-item id="3">
                        <pei></pei>
                    </mt-tab-container-item>
            </mt-tab-container>
    </div>
</template>
<script>
    import yifu from "./yifu"
    import pei from "./pei"
export default {
    name: 'page-navbar',
    data() {
        return {
            active: "1",
            list:[],

        }
    },
    components:{
        "yifu":yifu,
        "pei":pei
    },
    methods: {
        loadMore(){
            let url="fen";
            let obj={};
            this.axios.get(url,{params:obj}).then(result=>{
                let rows=this.list.concat(result.data.data);
                this.list=rows;
            })
        }
    },
    created() {
        this.loadMore()
    },
}
</script>
<style scoped>
    .box{
        width:100%;
        height:50px;
        z-index:1000;
        background-color:#fff;
        margin:0;
        position:fixed;
    }
    .top{
        display: flex;
        box-shadow: 7px 1px 12px -1px rgb(194, 190, 190);
    }
    .search{
        margin-left:15px;
        width:32px;
        height:30px;
        margin-top:10px;
        display:block;
    }
    .search2{
        height:30px;
        margin-top:10px;
        border:0;
        margin-left:20px;
        outline:none;
        display:block;
    }
    .page-part{
        margin-top:40px;
    }
    .mint-navbar .mint-tab-item{
        color:#666;
    }
    .mint-navbar .mint-tab-item.is-selected{
        border-bottom: 2px solid orange;
        color: #000;
    }
    .product{
        color:#4d5f48;
        margin-top:3px;
        height:100px;
        width:100%;
        background:#dff8f7;
        padding-left:20px;
        font-size:14px;
    }
    .f2{
        height:100px;
        margin-left:115px;
        vertical-align: middle;
    }
</style>